<template>
  <ul class="list">
    <li v-for="item in options" :key="item.id" class="list-box">
      <a :href="`/curriculum_details/${item.id}.html`" :title="item.title">
        <el-image class="list-box-cover" :src="item.imgs && item.imgs.length > 0 ? item.imgs[0] : ''" fit="cover"
          :alt="item.title" lazy />
      </a>
      <div class="list-box-info">
        <a :href="`/curriculum_details/${item.id}.html`" class="list-box-info-title" :title="item.title">{{
          item.title
        }}</a>
        <p :href="`/curriculum_details/${item.id}.html`" class="list-box-info-brief" v-html="item.brief"></p>
        <div class="list-box-info-tool">
          <p class="list-box-info-tool-author">讲师：{{ item.teachers && item.teachers.length > 0 ? item.teachers.map(x => x.name).join('，') : '-' }}</p>
          <a :href="`/curriculum_details/${item.id}.html`" class="el-button el-button--warning"
            :title="item.title">立即报名</a>
        </div>
      </div>
    </li>
  </ul>
  <el-empty v-show="options.length < 1" />
</template>

<script setup>
defineProps({
  options: {
    type: Array,
    default: [],
  },
});
</script>

<style lang="less" scoped>
.list {
  padding: 10px 0;
  margin-left: -15px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;

  &-box {
    flex: 390px 0;
    margin: 15px 0 0 15px;
    overflow: hidden;

    &-cover {
      width: 100%;
      height: 200px;
      border-radius: 10px 10px 0 0;
    }

    &-info {
      background: #ffffff;
      border-radius: 0 0 10px 10px;
      padding: 20px;

      &-title {
        font-weight: bold;
        font-size: 20px;
        height: 22px;
        line-height: 22px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &-brief {
        margin-top: 10px;
        font-size: 16px;
        color: #666666;
        height: 44px;
        line-height: 22px;
        display: block;
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      &-tool {
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &-author {
          font-size: 14px;
          color: #666;
          margin: 0;
        }
      }
    }
  }
}
</style>
